<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: red;
            display: block;
        }
    </style>
</head>
<body>
    <button>开关按钮</button>
    <div class="box" nnn="hahah">盒子</div>

    <script>
        /* 
        固有属性：系统给的属性； class  id  src 
        */
       var oDiv = document.querySelector("div");

       console.log(oDiv.className);
       
       console.log(oDiv.nnn);//自定义属性，写在标签上面的自定义属性用js获取不到，能看到


        /* 
        自定义属性：用户自己定义 
        */

        // js添加自定义属性
        oDiv.mmm = "哈哈哈";


        console.log(oDiv.mmm);//使用js添加的自定义属性，在标签上面看不到，但是可以获取到。  


        // 按钮开关效果

        // 1、获取元素
        var oBtn = document.querySelector('button');

        // 定义状态值  =  true  开     false--关
        var tag = true;

        // 2、加事件
        oBtn.onclick = function(){
            // 3、做什么事 ---- 
            // 隐藏div
            // 判断当前元素的状态值
            if(tag == true){
                oDiv.style.display = "none";
                tag = false;
            }else{
                oDiv.style.display = "block";
                tag = true;
            }
        }

    </script>
</body>
</html>